<template>
  <div class="more-wall fyt-index">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <el-card>
          <el-row type="flex" class="user-wall">
            <el-avatar :size="60" src="https://empty" @error="errorHandler">
              <img :src="user.headPic" />
            </el-avatar>
            <div class="username">
              {{ user.fullName }}
              <p>
                {{ user.organize }}-
                <span v-for="it in user.role" :key="it">{{ it }}</span>
                <span style="padding-left: 30px; display: inline-block">
                  上次登录时间：{{ user.lastTime }}
                </span>
              </p>
            </div>
            <ul class="user-right">
              <li>
                <el-tag><i class="el-icon-chat-line-round"></i></el-tag>
                消息
                <p>{{ user.messageSum }}</p>
              </li>
              <li>
                <el-tag type="warning"><i class="el-icon-position"></i></el-tag>
                待办项
                <p>{{ user.agencySum }}</p>
              </li>
            </ul>
          </el-row>
        </el-card>
      </el-col>

      <el-col :xs="12" :sm="12" :md="24" :lg="3" :xl="3">
        <el-card>
          <div class="quick-key">
            <i class="el-icon-s-platform" style="color: rgb(149, 222, 100)"></i>
            工作台
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="12" :md="24" :lg="3" :xl="3">
        <el-card>
          <div class="quick-key">
            <i class="el-icon-s-check" style="color: rgb(105, 192, 255)"></i>
            用户信息
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="12" :md="24" :lg="3" :xl="3">
        <el-card>
          <div class="quick-key">
            <i class="el-icon-s-claim" style="color: rgb(24, 144, 255)"></i>
            权限设置
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="12" :md="24" :lg="3" :xl="3">
        <el-card>
          <div class="quick-key">
            <i class="el-icon-date" style="color: rgb(255, 192, 105)"></i>
            登录日志
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="12" :md="24" :lg="3" :xl="3">
        <el-card>
          <div class="quick-key">
            <i
              class="el-icon-c-scale-to-original"
              style="color: rgb(92, 219, 211)"
            ></i>
            栏目管理
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="12" :md="24" :lg="3" :xl="3">
        <el-card>
          <div class="quick-key">
            <i
              class="el-icon-s-opportunity"
              style="color: rgb(179, 127, 235)"
            ></i>
            广告管理
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="12" :md="24" :lg="3" :xl="3">
        <el-card>
          <div class="quick-key">
            <i
              class="el-icon-s-opportunity"
              style="color: rgb(179, 127, 235)"
            ></i>
            广告管理
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="12" :md="24" :lg="3" :xl="3">
        <el-card>
          <div class="quick-key">
            <i
              class="el-icon-s-opportunity"
              style="color: rgb(179, 127, 235)"
            ></i>
            广告管理
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
        <el-card>
          <div slot="header">
            <i class="el-icon-warning-outline"></i>
            最新消息
            <el-tag class="tag-home" type="warning">日</el-tag>
          </div>
          <div>
            <el-timeline>
              <el-timeline-item
                v-for="(activity, index) in activities"
                :key="index"
                :icon="activity.icon"
                :type="activity.type"
                :color="activity.color"
                :size="activity.size"
                :timestamp="activity.timestamp"
              >
                {{ activity.content }}
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
        <el-card>
          <div slot="header">
            <i class="el-icon-set-up"></i>
            项目进度
            <el-tag class="tag-home" type="danger">月</el-tag>
          </div>
          <div style="height: 285px">
            <el-table :data="tableData" stripe style="width: 100%">
              <el-table-column prop="name" label="项目名称"></el-table-column>
              <el-table-column
                prop="beginTime"
                label="开始时间"
                width="150"
              ></el-table-column>
              <el-table-column
                prop="endTime"
                label="结束时间"
                width="150"
              ></el-table-column>
              <el-table-column prop="status" label="状态" width="80">
                <template #default="scope">
                  <el-tag
                    :type="scope.row.status === 1 ? 'primary' : 'success'"
                    disable-transitions
                  >
                    {{ scope.row.status == 1 ? '进行中' : '未开始' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="progress" label="进度" width="150">
                <template #default="scope">
                  <el-progress :percentage="scope.row.progress"></el-progress>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { getUser, getMessage } from '@/api/work'
  import * as echarts from 'echarts'
  import 'echarts/theme/macarons.js'
  export default {
    name: 'More',
    components: {},
    data() {
      return {
        user: {},
        activities: [],
        tableData: [
          {
            name: '项目0001',
            beginTime: '2020-05-02',
            endTime: '2021-05-02',
            status: 1,
            progress: 30,
          },
          {
            name: '项目0002',
            beginTime: '2020-05-02',
            endTime: '2021-05-02',
            status: 0,
            progress: 90,
          },
          {
            name: '项目0003',
            beginTime: '2020-05-02',
            endTime: '2021-05-02',
            status: 1,
            progress: 20,
          },
          {
            name: '项目0004',
            beginTime: '2020-05-02',
            endTime: '2021-05-02',
            status: 1,
            progress: 60,
          },
          {
            name: '项目0005',
            beginTime: '2020-05-02',
            endTime: '2021-05-02',
            status: 1,
            progress: 10,
          },
        ],
      }
    },
    created() {},
    mounted() {
      this.initAdmin()
      this.initMessage()
    },
    methods: {
      async initAdmin() {
        const u = await getUser()
        this.user = u.data
      },
      async initMessage() {
        const m = await getMessage({ limit: 4 })
        const that = this
        m.data.items.forEach((m, index) => {
          if (index == 0) {
            that.activities.push({
              content: m.title,
              timestamp: m.createTime,
              size: 'large',
              type: 'primary',
              icon: 'el-icon-more',
            })
          } else {
            that.activities.push({
              content: m.title,
              timestamp: m.createTime,
              color: m.isRead ? '#0bbd87' : '',
            })
          }
        })
      },
      errorHandler() {
        return true
      },
    },
  }
</script>
<style lang="scss" scoped>
  .user-wall {
    .username {
      margin-left: 20px;
      padding-top: 10px;
      flex: 1;
      p {
        margin: 5px 0 0 0;
      }
    }
    .user-right {
      margin: 0px;
      list-style: none;
      display: flex;
      li {
        margin-left: 30px;
        text-align: right;
        p {
          margin: 5px 0 0 0;
          font-size: 20px;
        }
      }
    }
  }
  .more-wall {
    ::v-deep {
      .el-card__body {
        > div {
          min-height: 220px;
          padding: 10px 0;

          > ul {
            > li {
              line-height: 30px;
            }
          }

          > img {
            display: block;
            margin: 40px auto;
            border: 1px solid #dedede;
          }
        }
      }
    }
  }
</style>
<style>
  .user-right .el-tag {
    border-radius: 50px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    padding: 0;
  }
  .el-card__header {
    position: relative;
  }
  .tag-home {
    position: absolute;
    right: 10px;
    top: 12px;
  }
  .el-card__body > div {
    min-height: auto !important;
  }
  .quick-key {
    text-align: center;
  }
  .quick-key i {
    display: block;
    font-size: 40px;
    color: #cccccc;
    margin-bottom: 10px;
  }
  .three-chart {
    height: 200px;
  }
  .device-col {
    height: 227px;
  }
  .in-foot-all {
    margin: 0;
    padding: 10px 10px 0 0px !important;
    border-top: 1px solid #f1f1f1;
  }
  @media screen and (max-width: 1500px) {
    .fyt-index .el-card__body .quick-key {
      padding: 0px !important;
    }
    .three-chart {
      height: 150px;
    }
    .device-col {
      height: 177px;
    }
  }
</style>
